<template>
 <a-card :bordered="false"
  class="add-personel-card"
  :headerStyle="cardHeaderStyle">
    <template #title>
      <div class="card-title" style="vertical-align: middle">
          <img :src="editPerson" width="18px" height="18px" alt="">
          <span class="card-add-title">编辑员工账号</span>
      </div>
    </template>
    <a-form ref="personForm"
      :model="personInfo" :style="{ width: '600px' }" @submit="handleSubmit">
      <a-form-item field="nickname" label="客户经理："
      :rules="[{ required: true, message: '客户经理不能为空' }]"
      :validate-trigger="['change', 'blur']">
        <a-input v-model="personInfo.nickname" placeholder="请输入客户经理" />
      </a-form-item>
      <!-- <a-form-item field="account" label="登陆账号："
      :rules="[{ required: true, message: '登陆账号不能为空' }]"
      :validate-trigger="['change', 'blur']">
        <a-input v-model="personInfo.account" placeholder="请输入登陆账号" />
      </a-form-item> -->

      <a-form-item field="mobile" label="登录手机号："
      :rules="[{ required: true, message: '登录手机号不能为空' }]"
      :validate-trigger="['change', 'blur']">
        <a-input v-model="personInfo.mobile" placeholder="请输入短信手机号" />
      </a-form-item>
      
      <a-form-item field="password" label="登陆密码：">
        <a-input v-model="personInfo.password" placeholder="请输入登陆密码" />
      </a-form-item>

      <a-row :gutter="8">
        <a-col :span="12">
          <a-form-item field="switch" label-col-flex="100px" label="进件状态：">
            <a-switch v-model="personInfo.entry_status" 
            :checked-value="1" :unchecked-value="0" />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item field="switch" label-col-flex="100px" label="账号状态：">
             <a-switch v-model="personInfo.status" checked-value="normal" unchecked-value="stop" />
          </a-form-item>
        </a-col>
      </a-row>  

      <a-form-item label-col-flex="10px">
        <a-space :size="20" style="margin-top: 20px;">
          <a-button size="medium" @click="onClose" class="closeBtn">返回</a-button>
          <a-button size="medium" type="primary" html-type="submit" :loading="loading">保存</a-button>
        </a-space>
      </a-form-item>
    </a-form>
 </a-card>
</template>

<script setup lang="ts">
import editPerson from '@/assets/images/edit-person.svg?url'
import addPerBg from '@/assets/images/addPerBg.png'
import { ref , reactive,computed , onMounted , readonly } from 'vue'
import { createPerson, getPersonnelById } from "@/api/personnel";
import useLoading from '@/hooks/loading';
import { Message } from '@arco-design/web-vue';
import { useRouter } from 'vue-router';
import { isNumber } from '@/utils/is';
import { useTabBarStore } from '@/store';

const router = useRouter();
const tabBarStore = useTabBarStore();
const { loading, setLoading } = useLoading();
let personForm = ref();
let personInfoInit = readonly({
      id: undefined,
      account: '',
      password: null,
      nickname: '',
      mobile: '',
      status: "stop",
      entry_status: 0
})

let personInfo = reactive({ ...personInfoInit })
const handleSubmit = ({ errors, values })=>{
  if (loading.value) return;
  if (!errors) {
    createPerson(personInfo).then((res: any)=>{ 
      if(res.code == 1){
        Message.success('修改成功')
      }
    }).catch(()=>{
      Message.error('修改失败！')
      setLoading(false)
    })
  }
}

const onClose = ()=>{
  tabBarStore.deleteCurrentTag(router)
}

onMounted(()=>{
  let uid = router.currentRoute.value.query?.uid as string;
  if(uid !== '' && isNumber(Number(uid))){
    getPersonnelById({ id: uid }).then(({ data })=>{
      let { id, username, nickname, mobile, status, entry_status } = data.details;
      personInfo = Object.assign(personInfo , {
        id, account: username, nickname, mobile, status, entry_status
      })
    })
  }
})

const cardHeaderStyle = computed(()=>{
   return {
      height: '60px',
      background:`#EAECF8`,
      backgroundImage: `url(${addPerBg})`,
      backgroundSize: 'contain',
      backgroundPosition: 'right',
      backgroundRepeat: 'no-repeat',
   }
});




</script>

<style scoped lang='less'>
  .closeBtn{
    background: #FFFFFF;
    border-radius: 4px 4px 4px 4px;
    border: 1px solid #A7AFBF;
    color: #333333;
    font-weight: bold;
    font-size: 14px;
  }
  
  .card-add-title{
    margin-left: 5px;
    font-weight: bold;
    font-size: 18px;
    color: #333333;
  }

  .card-title{
     display: flex;
     align-items: center;
  }

</style>